<template>
    <div class="page">
        <div class="container">
            <!-- <span class="reach_top">此AI机器人基于官方API开发，与官方同一个大脑在思考哦，快去提个问题吧</span> -->
            <template v-for="(i, idx) in list">
                <div :key="idx" class="item " :class="{'send_item': i.type == 'user', 'get_item': i.type == 'ai'}">
                    <div class="avator">
                        <image v-if="i.type == 'user'" src="https://jdkj-1306681707.cos.ap-nanjing.myqcloud.com/S0000111/image/renovationImg_202302150945068790.png" />
                        <image v-if="i.type == 'ai'" src="/static/images/logo.png" />
                    </div>
                    <div class="content" :class="{loading_content: i.contextText == 'AI思考中'}">
                        <div class="auto_btn" v-if="idx == 0">
                            <p>我是人工智能AI问答助手，我可以帮助您完成很多工作，包括但不限于：</p>
                            <div v-for="(item, index) in i.sysTip" :key="index">
                                <p class="p_t">{{item.p_t}}</p>
                                <div class="btns">
                                    <span @click="sendMsg(b)" v-for="b in item.btns" :key="b">{{b}}</span>
                                </div>
                            </div>
                        </div>
                        <template>
                            <div @click="copy(i)" v-if="i.noCopy" v-html="i.contextText"></div>
                            <template v-else>
                                {{i.contextText == 'AI思考中' ? loadingText : i.contextText}}
                            </template>
                            <div class="img" v-if="i.imgUrl">
                                <image :src="i.imgUrl" mode="widthFix" />
                            </div>
                        </template>
                        <!-- <div v-if="!i.noCopy && i.type == 'ai' && !loading" class="op">
                            <div class="flex-1"></div>
                            <p @click="copy(i)">复制</p>
                            <button open-type="share">分享</button>
                            <div class="flex-1"></div>
                        </div> -->
                    </div>
                </div>
            </template>
        </div>
        <div class="input">
            <input type="text" v-model="content" confirm-type="send" @confirm="sendMsg()">
            <!-- <textarea maxlength="-1" v-model="content" confirm-type="send" placeholder="写一首歌"></textarea> -->
            <div class="send" @click="sendMsg()">发送</div>
        </div>
    </div>
</template>

<script>
import { aiAnswer } from '@/request/art'
import { mapState } from 'vuex';
export default {
    data() {
        return {
            canUseCount: '',
            content: '',
            loading: false,
            loadingText: 'AI思考中',
            list: [
                {
                    id: '',
                    type: 'ai',
                    noCopy: true,
                    imgUrl: '',
                    sysTip: [
                        {
                            p_t: '--营销助手',
                            btns: [ '朋友圈优美配文', '高情商回复', '小红书种草文案', '小红书探店文案', '抖音标题优化', '演讲稿生成' ]
                        },
                        {
                            p_t: '--职场助手',
                            btns: [ '会议纪要生成', 'PPT大纲', '工作日报', '周报生成', '简历优化' ]
                        },
                        {
                            p_t: '--情感专家',
                            btns: [ '约会指导', '表白生成', '挽回感情', '相亲自我介绍' ]
                        },
                    ],
                    // contextText: ` 
                    //     我是人工智能AI问答助手，我可以帮助您完成很多工作，包括但不限于：<br/>
                    //     --营销助手<br/>
                    //     1、朋友圈优美配文<br/>
                    //     2、高情商回复<br/>
                    //     3、小红书种草文案<br/>
                    //     4、小红书探店文案<br/>
                    //     5、抖音标题优化<br/>
                    //     6、演讲稿生成<br/>
                    //     --职场助手<br/>
                    //     1、会议纪要生成<br/>
                    //     2、PPT大纲<br/>
                    //     3、工作日报<br/>
                    //     4、周报生成<br/>
                    //     5、简历优化<br/>
                    //     --情感专家<br/>
                    //     1、约会指导<br/>
                    //     2、表白生成<br/>
                    //     3、挽回感情<br/>
                    //     4、相亲自我介绍<br/>
                    //     5、舔狗日记生成<br/>
                    // `                    
                }
            ]
        }
    },
    computed: {
        ...mapState([]),
    },
    onLoad() {
        let count = 0
        setInterval(() => {
            count += 1
            if(count > 3) {
                count = 1
            }
            let pointArr = new Array(count).fill(' · ')
            this.loadingText = 'AI思考中' + pointArr.join('')
        }, 500)
    },
    methods: {
        getUseNum() {
            userChatNum({
                token: this.token
            }).then(res => {
                this.canUseCount = res.data
            })
        },
        sendMsg(fastMsg) {
            if(this.loading || (!this.content && !fastMsg)) return;
            this.loading = true
            let content
            if(fastMsg) {
                content = fastMsg
            } else {
                content = this.content
            }

            this.list.push({
                type: 'user',
                contextText: content
            })
            this.content = ''
            this.list.push({
                type: 'ai',
                contextText: 'AI思考中'
            })

            this.setScrollBottom()
            aiAnswer({
                text: content
            }, { loadingIcon: false, noErrorTip: true }).then(res => {
                this.loading = false
                let content = res.data.rsp
                this.list[this.list.length - 1].contextText = content
                let reg = /\(http.*?(jpg|jpeg\png|gif)\)/i
                let imgInfo = reg.exec(res.data)
                if(imgInfo) {
                    this.list[this.list.length - 1].imgUrl = imgInfo[0].slice(1, -1)
                }

                this.setScrollBottom()
            }, err => {
                this.loading = false
                this.list.splice(this.list.length - 2, 2)
                this.content = content

                if(err.code == 911) {
                    this.$interact.modal({
                        title: '提示',
                        content: err.msg,
                        showCancel: true
                    }).then(action => {
                        if(action.confirm) {
                            this.$navigate.toVip()
                        }
                    })
                } else {
                    uni.showModal({
                        title: '提示',
                        content: err.msg || err.message || err.errMsg || '网络错误',
                        showCancel: false,
                    });

                }
            })
        },
        // 页面滚动到底部
        setScrollBottom() {
            this.$nextTick(() => {
                let scrollTop = 9999999 + Math.random() * 10
                uni.pageScrollTo({ scrollTop: scrollTop, duration: 50 });
            })
        },
        copy(i) {
            uni.setClipboardData({
                data: i.contextText,
            })
        }
    }

}
</script>


<style lang="less" scoped>
.page{
    .reach_top{
        width: 100%;
        line-height: 38rpx;
        color: #999;
        font-size: 28rpx;
        padding: 20rpx 30rpx;
    }
    .auto_btn{
        .p_t{
            font-weight: bold;
            margin-bottom: 10rpx;
        }
        .btns {
            display: flex;
            flex-wrap: wrap;
            span{
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 10rpx;
                background: #f1f1f1;
                margin-right: 20rpx;
                margin-bottom: 20rpx;

            }
        }
    }
    .container{
        display: flex;
        flex-direction: column;
        padding: 20rpx 0 160rpx 0;
        .avator{
            width: 80rpx;
            height: 80rpx;
            background: #ccc;
            border-radius: 10rpx;
            margin: 0 20rpx;
            overflow: hidden;
            flex-shrink: 0;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .item{
            // width: 630rpx;
            margin-bottom: 30rpx;
            display: flex;
            .content{
                // flex: 1;
                max-width: 510rpx;
                border-radius: 10rpx;
                position: relative;
                padding: 20rpx;
                text-align: justify;
                font-size: 28rpx;
                line-height: 40rpx;
                word-break:break-all;
                &.loading_content{
                    min-width: 250rpx;
                }
                &::before{
                    content: "";
                    position: absolute;
                    width: 0;
                    height: 0;
                    top: 22rpx;
                    border-right: 20rpx solid;
                    border-top: 15rpx solid transparent;
                    border-bottom: 15rpx solid transparent;
                }
                image{
                    display: block;
                    width: 100%;
                    margin-top: 10rpx;
                }
                .op{
                    min-width: 472rpx;
                    display: flex;
                    border-top: 1rpx solid #eee;
                    padding-top: 10rpx;
                    margin-top: 10rpx;
                    p{
                        margin-right: 100rpx;
                    }
                    p, button{
                        position: relative;
                        font-size: 28rpx;
                        top: 5rpx;
                        width: 120rpx;
                        height: 52rpx;
                        line-height: 52rpx;
                        text-align: center;
                        background: #fff;
                        color: #067D12;
                        border: 0;
                        border-radius: 5rpx;
                        padding: 0;
                        &::after{
                            border: none;
                        }
                    }
                }
            }

            &.get_item{
                align-self: flex-start;
                .content{
                    background: #fff;
                    &::before{
                        border-right-color: #fff;
                        left: -14rpx;
                    }
                }
            }
            &.send_item{
                align-self: flex-end;
                flex-direction: row-reverse;
                .content{
                    background: #88d904;
                    &::before{
                        border-right-color: #88d904;
                        right: -14rpx;
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
    .input{
        width: 100%;
        height: 140rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #eeeeee;
        input, textarea{
            flex: 1;
            height: 102rpx;
            border-radius: 8rpx;
            // border: 1rpx solid #e5e5e5;
            background: #fff;
            padding: 0 20rpx;
        }
        textarea{
            padding: 10rpx 20rpx;
        }
        .send{
            width: 120rpx;
            height: 102rpx;
            line-height: 102rpx;
            margin-left: 20rpx;
            text-align: center;
            background: #88d904;
            border-radius: 8rpx;
            color: #fff;
            font-size: 28rpx;
        }
    }
}

@keyframes loadingAni {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}


</style>
